<template>
    <div>
      <!-- 搜索表单 -->
      <div style="margin-bottom:20px;">
        <el-input style="width:240px" placeholder="请输入用户账号" v-model="act"></el-input>
        <el-input style="width:240px;margin-left: 5px;" placeholder="请输入书籍名称" v-model="name"></el-input>
        <el-button style="margin-left:5px;" type="primary" @click="load"><i class="el-icon-search"></i>搜索</el-button>
        <el-button style="margin-left:5px;" type="warning" @click="reset"><i class="el-icon-refresh"></i>重置</el-button>
      </div>
  
      <!-- 为网格加网线 -->
      <el-table :data="tableData" stripe>
        <el-table-column prop="number" label="书号"></el-table-column>
        <el-table-column prop="book_name" label="书籍名称"></el-table-column>
        <el-table-column prop="act" label="用户账号"></el-table-column>
        <el-table-column prop="user_name" label="用户姓名"></el-table-column>
        <el-table-column prop="borrow_date" label="借阅时间"></el-table-column>
        <el-table-column prop="islater" label="归还情况"></el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import request from '@/utils/request'
  
  export default {
    name: 'Info',
    data(){
      return {
        tableData:[],
        total:0,
        pageNo:1,
        pageSize:5,
        act:'',
        name:''
      }
    },
    mounted(){
      this.load()
    },
    methods:{
      load(){
        request.get('/api/page/workbench/info/allinfo.do',{
          params:{
            act:this.act,
            name:this.name,
            pageNo:this.pageNo,
            pageSize:this.pageSize
          }
        }).then(res=>{
          this.total=res.total
          let item=[]
          let temp=res.data
          temp.forEach((data,index)=>{
            data.islater=(data.islater=="0"?"借阅正常":"借阅超时")
            item.push(data)
          })
          this.tableData=item
        })
      },
      reset(){
        this.pageNo=1
        this.pageSize=this.pageSize
        this.act=''
        this.name=''
        this.load()
      },
      handleSizeChange(pageSize){
        // 改变页面大小按钮触发分页 pageSize是页面大小
        // console.log(pageSize)
        this.pageSize=pageSize
        this.load()
      },
      handleCurrentChange(pageNo){
        // 改变当前页数按钮触发分页 pageNo是当前页数
        // console.log(pageNo)
        this.pageNo=pageNo
        this.load()
      }
    }
  }
  </script>
  
  <style>
  
  </style>